// 元素背景图片的复用
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  display: inline-block;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
}

// flex 布局复用
@mixin flex($d:row,$jc:space-between,$ai:center){
  display: flex;
  flex-direction: $d;
  justify-content: $jc;
  align-items: $ai;
}

@mixin position($pos:absolute,$top:0,$left:0,$w:100%,$h:100%){
  position: $pos;
  top:$top;
  left: $left;
  width: $w;
  height: $h;
}

@mixin positionR($pos:absolute,$top:0,$right:0,$w:100%,$h:100%){
  position: $pos;
  top:$top;
  right: $right;
  width: $w;
  height: $h;
}

@mixin colCenter($h:40px){
  height: $h;
  line-height: $h;
}

@mixin abCenter($ps: absolute){
  position: $ps;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@mixin lineCenter($h: 40px){
  height: $h;
  line-height: $h;
  text-align: center;
}
//多行文字超出显示省略号
@mixin ellipsisMultiline($number: 1) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
}